@charset "utf-8";
@import "reset";
@function baifenbi($p){
    @return $p / 1366 * 100%;
}
.WebConent{
    width: 100%;
//  text-align: center;
    overflow: hidden;
    position: relative;
}
.WebConent-Lunbo{
    width: 100%;
    overflow: hidden;
//  height: 470px;
    margin: 0 auto;
}
.WebConent-Lunbo{
    position: relative;
    >div:nth-of-type(1){
        width: baifenbi(641);
        position: absolute;
        top: 0;
        left: -800px;
        background: white;
        >div{
            overflow: hidden;
            display: inline-block;
            margin: 35px 40px;

            >ul>li{
                vertical-align: top;
                line-height: 48px;
                font-size: 15px;
                color: #444f58;
                display: inline-block;
                margin: 0 30px;
    //          margin-left: 62px;
                >ul>li{
                    line-height: 48px;
                    font-size: 13px;
                }
            }
        }   
    }
}
@keyframes move{
    0%{transform: translateX(0px);}
    100%{transform: translateX(1150px);}
}
@keyframes mymove{
    0%{transform: translateX(0px);}
    100%{transform: translateX(1300px);}
}
.WebConent-Lunbo-bottom{
    text-align: center;
    width: 100%;
    >div{
        display: inline-block;
    }
    >div:hover{
        >img{
            transform: scale(1.1);
        }
    }
}
.WebConent-Title{
    margin: 0 auto;
    margin-top: 65px;
    text-align: center;
    >p{
        
        font-size: 20px;
        color: #444f58;
    }
    >div{
        width:25px;
        height: 3px;
        background: #eb413d;
        display: inline-block;
    }
}
.WebConent-Shangpin{
    width: 100%;
    text-align: center;
    margin-top: 44px;
    >div:hover{
        
        border:1px solid #C9C8C8;
        >div{
            >img{
                transform: scale(1.1);
            }
        }
    }
    >div{
        padding-top:20px ;
        display: inline-block;
        border:1px solid transparent;
        >div{
            width:228px;
            height: 215px;
            overflow: hidden;
            cursor: pointer;
            
        }
        >p{
            color: #444f58;
            margin-top: 34px;
            cursor: pointer;
        }
        >span{
            color:#99999a;
            margin-top: 12px;
            cursor: pointer;
        }
    }
}
.WebConent-Guanggao{
    width: 100%;
    margin-top: 64px;
    cursor: pointer;
}
.WebConent-Fenlei{
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.WebConent-Fenlei-top{
    vertical-align: top;
    width:399px;
    height: 452px;
    display: inline-block;
    >div:nth-child(1){
        height:223px;
        width: 100%;
        background: url(../zl_img/fenlei-1.jpg);
        margin-bottom: 8px;
        text-align: left;
        overflow: hidden;
        >h3{
            color: white;
            font-size: 32px;
            margin-top: 35px;
            margin-left:23px;
            margin-bottom: 33px;
            font-weight:100;
            cursor: pointer;
        }
        >ul{
            margin-left: 18px;
            >li{
            display: inline-block;
            >ul>li:hover{
                background:deeppink;
            }
            >ul>li{
                cursor: pointer;
                line-height: 17px;
                color: white;
                width:65px;
                padding-left: 6px;
                margin-top: 5px;
                margin-left: 5px;
                font-size: 12px;
                background: #f1b0b8;
                }
            }
        }
 
    }
    >div:nth-child(2){
        display: inline-block;
        width:197px;
        height:223px;
        background: url(../zl_img/fenlei-2.jpg);
        overflow: hidden;
        text-align: left;
        >h3{
            color: white;
            font-size: 32px;
            margin-top: 32px;
            margin-left:23px;
            margin-bottom: 4px;
            font-weight:100;
            cursor: pointer;
        }
        >ul{
            margin-left: 18px;
            >li{
            display: inline-block;
            >ul>li:hover{
                background: springgreen;
            }
            >ul>li{
                cursor: pointer;    
                line-height: 17px;
                color: white;
                width:65px;
                padding-left: 6px;
                margin-top: 5px;
                margin-left: 5px;
                font-size: 12px;
                background:rgba(0,0,0,0.1);
                
                }
            }
        }
    }
    >div:nth-child(3){
        display: inline-block;
        width:197px;
        height:223px;
        background: url(../zl_img/fenlei-3.jpg);
        overflow: hidden;
        text-align: left;
        >h3{
            cursor: pointer;
            color: white;
            font-size: 32px;
            margin-top: 32px;
            margin-left:23px;
            margin-bottom: 4px;
            font-weight:100;
        }
    }
}
.WebConent-zhanshi{
    display: inline-block;
    width:47%;
    vertical-align: top;
    >div:hover{
        border: 1px solid deeppink;
    }
    >div{
        cursor: pointer;
        display: inline-block;
        border: 1px solid #dee0e2;
        height:223px;
        overflow: hidden;
        text-align: left;
        >div{
            position: relative;
            height:176px;
            width: 190px;
            overflow: hidden;
            >img{
                position: absolute;
                left:50% ;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        }
        >p{
            
            color: #444f58;
            font-size: 15px;
            margin-left: 9px;
        }
        >span{
            color: #99999a;
            font-size: 15px;
            margin-left: 9px;
            margin-bottom: 4px;
            >div{
                width: 83px;
                height: 20px;
                background: black;
                border-radius:10px;
                display: inline-block;
                color: white;
                font-size: 12px;
                margin-left: 44px;
                line-height: 20px;
                >img{
                    margin-left: 7px;
                    vertical-align: -4%;
                }
            }
        }
    }
    
}
.WebConent-Fenlei-center{
    vertical-align: top;
    width:399px;
    display: inline-block;
    text-align: left;
    div:nth-child(1){
        display: inline-block;
        width:197px;
        height:223px;
        background: url(../zl_img/fenlei-4.jpg);
        overflow: hidden;
        >h3{
            color:black;
            font-size: 32px;
            margin-top: 35px;
            margin-left:20px;
            margin-bottom: 0px;
            font-weight:100;
            cursor: pointer;
        }
        >ul{
            margin-left: 16px;
            >li{
                display: inline-block;
                >ul>li:hover{
                    background:rgb(54,227,242);
                }
                >ul>li{
                    cursor: pointer;
                    line-height: 17px;
                    color: white;
                    width:65px;
                    padding-left: 6px;
                    margin-top: 5px;
                    margin-left: 5px;
                    font-size: 12px;
                    background:rgba(54,227,242,0.3);
                }
            }
        }
    }
    div:nth-child(2){
        display: inline-block;
        width:197px;
        height:223px;
        background: url(../zl_img/fenlei-5.jpg);
        overflow: hidden;
        >h3{
            color:black;
            font-size: 32px;
            margin-top: 35px;
            margin-left:20px;
            margin-bottom: 0px;
            font-weight:100;
            cursor: pointer;
        }
        >ul{
            margin-left: 16px;
            >li{
                display: inline-block;
                >ul>li:hover{
                    background:deeppink;
                }
                >ul>li{
                    cursor: pointer;
                    line-height: 17px;
                    color: white;
                    width:65px;
                    padding-left: 6px;
                    margin-top: 5px;
                    margin-left: 5px;
                    font-size: 12px;
                    background:rgba(247,198,192,0.6);
                }
            }
        }
    }
}
.WebConent-Fenlei-bottom{
    vertical-align: top;
    width:399px;
    display: inline-block;
    text-align: left;
    div:nth-child(1){
        display: inline-block;
        width:197px;
        height:223px;
        background: url(../zl_img/fenlei-6.jpg);
        overflow: hidden;
        >h3{
            color:black;
            font-size: 32px;
            margin-top: 35px;
            margin-left:20px;
            margin-bottom: 0px;
            font-weight:100;
            cursor: pointer;
        }
        >ul{
            margin-left: 16px;
            >li{
                display: inline-block;
                >ul>li:hover{
                    background:rgb(235,65,61);
                }
                >ul>li{
                    cursor: pointer;
                    line-height: 17px;
                    color: white;
                    width:65px;
                    padding-left: 6px;
                    margin-top: 5px;
                    margin-left: 5px;
                    font-size: 12px;
                    background:rgba(235,65,61,0.3);
                }
            }
        }
    }
    div:nth-child(2){
        display: inline-block;
        width:197px;
        height:223px;
        background: url(../zl_img/fenlei-7.jpg);
        overflow: hidden;
        >h3{
            color:black;
            font-size: 32px;
            margin-top: 35px;
            margin-left:20px;
            margin-bottom: 0px;
            font-weight:100;
            cursor: pointer;
        }
        >ul{
            margin-left: 16px;
            >li{
                display: inline-block;
                >ul>li:hover{
                    background:rgba(0,0,0,0.7);
                }
                >ul>li{
                    cursor: pointer;
                    line-height: 17px;
                    color: white;
                    width:65px;
                    padding-left: 6px;
                    margin-top: 5px;
                    margin-left: 5px;
                    font-size: 12px;
                    background:rgba(0,0,0,0.1);
                }
            }
        }
    }
}
.WebConent-xiuxian{
    margin-top: 30px;
    text-align: center;
    width: 100%;
    >div{
        width:248px;
        height: 381px;
        overflow: hidden;
        display: inline-block;
        position: relative;
        >span{
            width: 100%;
            height: 100%;
            background:rgba(168,160,160,0.6);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            display: none;
        }
    }
    >div:hover{
        >span{
            display: block;
        }
        >div{
                background: #A0A0A1;
        }
    }
    >div:nth-of-type(3){
        position: relative;
        overflow: hidden;
        img{
            margin-left: -44px;
            margin-top: -47px;
        }
        >div{
            z-index: 120;
            display: inline-block;
            position: absolute;
            top:290px;
            left:62px;
            width: 128px;
            height: 38px;
            border: 1px solid black;
            text-align: center;
            >p{
                line-height: 38px;
            }
        }
    }
    >div:nth-of-type(4){
        >div{
            position: relative;
            >span{
                width: 100%;
                height: 100%;
                background:rgba(168,160,160,0.6);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100;
                display: none;
            }
        }
        >div:hover{
            >span{
                display: block;
            }
            >div{
                background:pink;
            }
        }
        >div:nth-of-type(2){
            >div{
                z-index: 120;
                display: inline-block;
                position: absolute;
                top:94px;
                left:62px;
                width: 128px;
                height: 38px;
                border: 1px solid white;
                text-align: center;
                color: white;
                >p{
                    line-height: 38px;
                }
            }
        }
    }
}
.WebConent-pinpai{
    margin-top: 30px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-bottom: 103px;
    >div:nth-of-type(2){
        overflow: hidden;
        display: inline-block;
        width: 332px;
        vertical-align: top;
        margin-left:-5px;
        >div:hover{
            >img{
                transform: scale(1.1) translateX(10px);
            }
        }
        >div{
            cursor: pointer;
            border: 1px solid #e1e3e5;
            overflow: hidden;
            >img{
                vertical-align: -20%;
            }
        }
        >div:nth-of-type(2){
            border-top: 0px;
            overflow: hidden;
            >img{
                vertical-align: -22%;
            }
        }   
    }
    >div:nth-of-type(3){
        display: inline-block;
        width: 332px;
        vertical-align: top;
        margin-left:-4px;
        >div:hover{
            >img{
                transform: scale(1.1) translateX(10px);
            }
        }
        >div{
            cursor: pointer;
            border: 1px solid #e1e3e5;
            overflow: hidden;
            border-left:0px;
            >img{
                vertical-align: -20%;
            }
        }
        >div:nth-of-type(2){
            overflow: hidden;
            border-top: 0px;
            >img{
                vertical-align: -20%;
            }
        }   
    }
    >div:nth-of-type(1){
        display: inline-block;
        height: 333px;
        width: 332px;
        border: 1px solid #e1e3e5;
        background: url(../zl_img/wenzibeijing-1.jpg);
        text-align: left;
        >img{
            margin-left: 28px;
        }
        >p{
            margin-left: 28px;
            color: white;
            font-size: 15px;
            margin-top: 36px;
            margin-right: 25px;
        }
        >div{
            cursor: pointer;
            background: #eb413d;
            border-radius: 10px;
            width: 76px;
            height: 20px;
            font-size: 12px;
            margin-top: 25px;
            margin-left: 28px;
            text-align: center;
            box-sizing: border-box;
            color: white;
            padding: 1px 0px;
        }
    }
}
